 /*
 * @description: 客服聊天入口
 * @Author: along
 * @Date: 2020-09-23
 * @Last Modified by: along
 * @Last Modified time: 2020-09-23
 */
<template>
    <div class="custom">
        <!-- 左侧列表 -->
        <custom-list
            @startSession="startSession"
            @setlog="setlog"
            @start="start"
            @order="changeOrder"
            @clickSession="clickSession"
            @connect="connectSession"
            ref="customList"
        />

        <!-- 右侧聊天 -->
        <custom-chat
            v-if="!showOrder"
            :session_no="session_no"
            @closeSession="closeSession"
            @connect="connect"
            @clickSession="clickSession"
            ref="chat"
        />

        <!-- 订单列表 -->
        <custom-order
            v-if="showOrder"
            @connect="connectOrder"
        />

        <audio id="ad" src="https://cdn.zsdx.cn/wei/video/3761.mp3" muted></audio>
    </div>
</template>

<script>
import customList from '@/components/custom/custom-list.vue';
import customChat from '@/components/custom/custom-chat.vue';
import customOrder from '@/components/custom/custom-order.vue';
import { mapState } from 'vuex';

export default {
    components: {
        customList,
        customChat,
        customOrder
    },
    data() {
        return {
            session_no: '',//正在进行中会话编号
            showOrder: false
        };
    },
    computed: {
        ...mapState({
            sessionResult: state => state.global.sessionResult,
            quitRow: state => state.global.quitRow,
            chat_no: state => state.global.chat_no,
            messageNoticeId: state => state.global.messageNoticeId
        })
    },
    watch: {
        sessionResult: {
            handler: function (val, oldVal) {
                if(val.transfer_status == 1) {
                    this.resolve(val);
                } else {
                    this.reject();
                }
            },
            deep: true
        },
        quitRow: {
            handler: function (val, oldVal) {
                this.quitSession(val);
            },
            deep: true
        },
        messageNoticeId (val) {
            this.$notify.info({
                title: '新消息',
                message: '您有一条新的消息,请注意查收~',
                showClose: false,
                duration: 2000,
                customClass: 'zsdxfont zsdxxiaoxi',
                type: ''
            });
            this.playAudio();
        }
    },
    mounted () {
        this.showChat();

        // 处理音频自动播放
        const vdo = document.getElementById('ad');

        document.body.addEventListener('mousedown', function(){
            vdo.muted = true;
        }, false);

        // Notification.requestPermission().then(res => {
        //     // denied 或 granted
        //     console.log(res);
        // });

        // let notification = new Notification('新消息', {
        //     body: '已经错过的风景就不要再打听了，当你选定了一个方向，另一边的风景便与你无关了。',
        //     // 图标
        //     icon: 'https://common.likecs.com/images/wechat.png',
        //     // 预览大图
        //     image: 'https://user-gold-cdn.xitu.io/2020/5/18/1722800bd522f520?imageView2/1/w/1304/h/734/q/85/format/webp/interlace/1',
        //     // 通知id
        //     tag: 1,
        //     // 是否一直保持有效
        //     requireInteraction: true
        // });
    },
    methods: {
        playAudio () {
            var audio = new Audio('https://cdn.zsdx.cn/wei/video/3761.mp3');

            audio.play();
        },

        /**
         * @description 点击左侧用户开始会话
         */
        startSession (session_no) {
            this.session_no = session_no;
            this.$refs.chat.scrollHide();
        },

        /**
         * @description 历史会话查看详情打开聊天窗口
         */
        showChat () {
            let query = this.$route.query;

            if(query.session_no) {
                this.session_no = query.session_no;
                this.$store.commit('global/SET_SESSION', this.session_no);
                this.$refs.chat.getSession(false);
            }
        },

        /**
         * @description 关闭会话
         */
        closeSession () {
            this.$refs.customList.fnQuitChat({
                session_no: this.session_no
            });
        },

        /**
         * @description 超时等通知，关闭会话
         */
        quitSession (row) {
            if(row.session_no !== this.session_no) { //不在当前会话窗口
                this.$refs.customList.refreshData(row);
            } else {
                this.$refs.customList.quitSessionList(row);
            }
        },

        /**
         * @description 发起会话
         */
        connect (row) {
            this.$refs.customList.launch(row);
        },

        /**
         * @description 订单联系买家发起会话
         */
        connectOrder (row) {
            // console.log(row, 'row');
            this.$refs.customList.orderLauch(row);
        },

        /**
         * @description 订单联系买家发起会话
         */
        connectSession (row) {
            this.showOrder = false;
            setTimeout(() => {
                this.clickSession();
            },300);
            // this.$refs.chat.startSessionList(row);
            setTimeout(() => {
                // this.connectOrder(row);
                // this.clickSession();
            },200);
        },

        /**
         * @description 修改发起会话状态
         */
        setlog () {
            this.$refs.chat.setFlag();
        },

        /**
         * @description 走开始会话流程
         */
        start (row) {
            this.$refs.chat.startSessionList(row);
        },

        /**
         * @description 模拟点击会话
         */
        clickSession () {
            this.$post('/Session/getSessionList', {}, resp => {
                if(resp.code == 1) {
                    this.$store.commit('global/SET_SESSION_LIST', resp.data.list);
                    let dataList = resp.data.list;
                    // console.log('dataList', dataList);

                    for(let i=0; i<dataList.length; i++) {
                        if(dataList[i].chat_no == this.chat_no) {
                            this.$refs.customList.startSession(dataList[i]);
                        }
                    }
                }
            });
        },

        /**
         * @description 转接成功
         */
        resolve (val) {
            this.$refs.customList.updateList(val);
            const content = `
                <div class="el-notification__a">您申请的转接客服已同意</div>
                <div class="el-notification__b">转接用户: ${this.sessionResult.user_info.true_name}</div>
                <div class="el-notification__c">接入客服: ${this.sessionResult.transfer_kf_info.nickname}</div>
            `;

            this.$notify({
                title: '转接成功',
                dangerouslyUseHTMLString: true,
                message: content,
                iconClass: 'zsdxfont zsdxchenggong',
                customClass: 'customClass',
                duration: 0
            });
        },

        /**
         * @description 转接失败
         */
        reject () {
            const content = `
                <div class="el-notification__a">您申请的转接已被拒绝</div>
                <div class="el-notification__b">转接用户: ${this.sessionResult.user_info.true_name}</div>
                <div class="el-notification__c">拒接客服: ${this.sessionResult.transfer_kf_info.nickname}</div>
            `;

            this.$notify({
                title: '转接失败',
                dangerouslyUseHTMLString: true,
                message: content,
                iconClass: 'zsdxfont zsdxshibai',
                customClass: 'customClass',
                duration: 0
            });
        },

        /**
         * @description 查看订单列表
         */
        changeOrder (type) {
            this.showOrder = type;
        }
    },
};
</script>

<style lang="less" scoped>
.custom {
    width: 100%;
    flex: 1;
    margin-top: 12px;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    // min-width: 1125px;
}
</style>

<style lang="less">
.customClass {
    .el-notification__title {
        color: #333;
        height: 16px;
        line-height: 16px;
        margin-top: 6px;
    }
    .el-notification__a {
        font-size: 14px;
        color: #999999;
        margin-top: 8px;
    }
    .el-notification__b, .el-notification__c {
        color: #333;
        font-size: 14px;
        margin-top: 8px;
    }
    .el-notification__c {
        margin-top: 4px;
    }
    .zsdxchenggong {
        font-size: 20px;
        color: #2FBDB3;
        margin-top: 5px;
    }
    .zsdxshibai {
        font-size: 20px;
        color: rgba(221,90,94,1);
        margin-top: 5px;
    }
    .el-notification__closeBtn {
        color: rgba(98,105,113,1);
        font-size: 14px;
        font-weight: bold;
    }
}

.el-notification__icon {
    display: none !important;
}
.zsdxxiaoxi {
    font-size: 26px;
}
</style>
